<template>
    <div id="tiShi" ref="tishi">
        加入成功
    </div>
    <div id="zheDang"></div>
   <footer>
       <div id="keFu" @click="jumpKeFu">
           <svg>
               <use xlink:href="#icon-erji01"></use>
           </svg>
       </div>
       <div id="gouMai">
           立即购买
       </div>
       <div id="jiaRu" @click="shopCart">
           加入购物车
       </div>
   </footer>

</template>

<script>
    export default {
        name: "XiaDanFooterComzxw",
        props:['shopCart'],
        methods:{
            jumpKeFu(){
                this.$router.push('/zaixiankefu-view')
            },
            shopCart(){
                this.$store.dispatch('shopCart', this.shopCart)
                this.$refs.tishi.style.display = 'block'
                setTimeout(()=>{
                    this.$refs.tishi.style.display = 'none'
                },800)
            }
        }
    }
</script>

<style scoped>
    #zheDang{
        width: 100%;
        height: 55px;
    }
    svg{
        width: 30px;
        height: 30px;
        display: block;
        margin: 12.5px auto;
    }
    footer{
        width: 100%;
        height: 55px;
        border-top: 1px solid lightgrey;
        position: fixed;
        bottom: 0;
        background: #fff;
        z-index: 10;
    }
    footer>div{
        height: 100%;
        float: left;
    }
    #keFu{
        width: 20%;
        border-left: 1px solid lightgrey;
    }
    #gouMai{
        width: 39.1%;
        border-left: 1px solid lightgrey;
        text-align: center;
        line-height: 55px;
    }
    #jiaRu{
        width: 40%;
        background: red;
        color: #fff;
        text-align: center;
        line-height: 55px;
        float: right;
    }
    #tiShi{
        background: black;
        color: #fff;
        position: fixed;
        top: 45%;
        left: 45%;
        display: none;
    }
</style>